<template>
  <div class="jurisdiction">
    <el-table
      v-if="JurisdictionList.meta.status === 200"
      :data="JurisdictionList.data"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="编号" width="50">
      </el-table-column>
      <el-table-column prop="authName" label="权限名称"> </el-table-column>
      <el-table-column prop="path" label="路径"> </el-table-column>
      <el-table-column label="权限等级">
        <template v-slot="{ row }">
          <el-tag :type="row.level | getLevelType">{{
            row.level | getLevel
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      JurisdictionList: {
        data: [],
        meta: {},
      },
    };
  },
  created() {
    this.getJurisdiction();
  },
  filters: {
    getLevel: function (value) {
      let name = "";
      if (value === "0") {
        name = "一级";
      } else if (value === "1") {
        name = "二级";
      } else if (value === "2") {
        name = "三级";
      }
      return name;
    },
    getLevelType(value) {
      let type = "";
      if (value === "0") {
        type = "";
      } else if (value === "1") {
        type = "success";
      } else if (value === "2") {
        type = "info";
      }
      return type;
    },
  },
  methods: {
    async getJurisdiction() {
      const res = await this.$axios.get("rights/list");
      console.log(res);
      this.JurisdictionList = res.data;
    },
  },
};
</script>

<style >
.jurisdiction {
  padding: 15px;
}
</style>